<template>
  <div class="unit-select-wrapper">
    <DropdownMenu
      :trigger="'click'"
      :custom-style="{ padding: '8px' }"
      :placement="'bottom-end'"
    >
      <div class="unit-select-trigger">
        <span class="unit-select-text">{{ currentLabel }}</span>
        <i class="i-ri-arrow-down-s-fill unit-select-arrow"></i>
      </div>
      <template #menu>
        <div class="unit-select-dropdown">
          <div
            v-for="option in options"
            :key="option.value"
            class="unit-select-option"
            :class="{ active: selectedUnit === option.value }"
            @click="handleSelect(option.value)"
          >
            <!-- 选中标记 -->
            <div class="unit-select-check">
              <i
                v-if="selectedUnit === option.value"
                class="i-ri-check-line"
              ></i>
            </div>
            <span class="unit-select-label">{{ option.label }}</span>
          </div>
        </div>
      </template>
    </DropdownMenu>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { DropdownMenu } from "../../../dropdown";

defineOptions({
  name: "UnitSelect",
});

interface UnitOption {
  label: string;
  value: string;
}

const props = withDefaults(
  defineProps<{
    modelValue?: string;
    options: UnitOption[];
  }>(),
  {
    modelValue: "cm",
  }
);

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

const selectedUnit = computed({
  get: () => props.modelValue || "cm",
  set: (value) => emit("update:modelValue", value),
});

const currentLabel = computed(() => {
  const option = props.options.find((opt) => opt.value === selectedUnit.value);
  return option?.label || "";
});

const handleSelect = (value: string) => {
  selectedUnit.value = value;
};
</script>

<style lang="scss" scoped>
.unit-select-wrapper {
  position: relative;
}

.unit-select-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: transparent;
  min-width: 50px;
  justify-content: space-between;

  &:hover {
    .unit-select-text,
    .unit-select-arrow {
      color: var(--editor-primary-color);
    }
  }
}

.unit-select-text {
  font-size: 14px;
  color: var(--editor-text-color);
  user-select: none;
}

.unit-select-arrow {
  font-size: 14px;
  color: var(--editor-text-color-light);
  transition: transform 0.2s ease;
}

.unit-select-dropdown {
  background-color: var(--editor-color-white);
  min-width: 120px;
}

.unit-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;

  &:hover {
    background-color: color-mix(
      in srgb,
      var(--editor-primary-color) 4%,
      transparent
    );
  }

  &.active {
    background-color: color-mix(
      in srgb,
      var(--editor-primary-color) 8%,
      transparent
    );
  }
}

.unit-select-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  .i-ri-check-line {
    font-size: 16px;
    color: var(--editor-primary-color, #0D61F2);
  }
}

.unit-select-label {
  font-size: 14px;
  color: var(--editor-text-color);
  flex: 1;
}

/* 暗色主题适配 */
[theme-mode="dark"] {
  .unit-select-dropdown {
    background-color: var(--editor-color-dark);
  }

  .unit-select-option {
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--editor-primary-color) 4%,
        transparent
      );
    }
  }
}
</style>

